<!-- 反馈公开   暂时废弃-->
<template>
  <a-layout class="form-content">
    <div class="search-box">
      <a-button type="primary" @click="save"  class="mr8">
        保存
      </a-button>
      <a-button type="primary" @click="reset">
        刷新
      </a-button>
    </div>
    <div>
      <a-form-model
        ref="ruleForm"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :rules="rules"
        :model="ruleForm"
        class="formbox"
      >
        <a-form-model-item label="标题" class="formtab" prop="title">
          <a-input placeholder="标题" v-model="ruleForm.title" />
        </a-form-model-item>
        <a-form-model-item label="编辑人" class="formtab" prop="editedBy">
          <a-input placeholder="编辑人" v-model="ruleForm.editedBy" />
        </a-form-model-item>
        <a-form-model-item class="formtabMax" label=" " :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }">
          <vue-ueditor-wrap ref="topicContent" class="vueclick" v-model="ruleForm.content"
            :init="init" @ready="ready" :config="editorConfig">
          </vue-ueditor-wrap>
        </a-form-model-item>
        <a-form-model-item label="附件" class="formtabMax" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
          <a-upload
            :multiple="true"
            :file-list="fileList"
            :customRequest="customUpload"
            :before-upload="beforeFileUpload"
            :showUploadList="false"
          >
            <a-button>
              <a-icon type="upload"/>
              上传文件
            </a-button>
            <a-tooltip>
              <template slot="title">
                仅支持上传doc、docx、xls、xlsx、jpg、jpeg、png、pdf、txt格式的文件,文件大小不超过200M。
              </template>
              <a-icon type="question-circle" style="margin-left: 15px;color: orange;" />
            </a-tooltip>
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-layout>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import {
  getPublicityOfFeedback, addPublicityOfFeedback
} from '@/utils/index'

export default {
  name: 'PublicityOfFeedback',
  components: {
    VueUeditorWrap
  },
  data () {
    return {
      // 表单标题内容宽度设置
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      ruleForm: {},
      // 表单规则
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        editedBy: [{ required: true, message: '请输入编辑人', trigger: 'blur' }]
      },
      // 富文本编辑器
      editorConfig: {
        // 相对路径
        UEDITOR_HOME_URL: '/UEditor/',
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度// 初始容器宽度
        initialFrameHeight: 300,
        initialFrameWidth: '100%',
        toolbars: [[
          'fullscreen', 'source', '|', 'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
          'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
          'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
          'directionalityltr', 'directionalityrtl', 'indent', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
          'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
          'simpleupload', 'insertimage', '|',
          'horizontal', 'date', 'time', 'spechars', 'snapscreen', '|',
          'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts'
        ]],
        // 不显示字数
        // wordCount: false,
        enableAutoSave: false, // 自动保存
        // 上传图片路径,需要后台配置，否则控制台会报错。
        // 报错信息为 后台配置项返回格式出错，上传功能将不能正常使用！
        serverUrl: ''
      },
      editor: null,
      fileList: []
    }
  },
  mounted () {
    this.reset()
  },
  methods: {
    // start 富文本设置
    ready (editor) {
        this.editor = editor
        editor.execCommand('fontSize', '14px')
    },
    init () {},
    // 富文本设置end
    // 上传验证
    beforeFileUpload (file) {
      if (file.name.substring(0, file.name.indexOf('.')).length > 200) {
        this.$message.error('上传文件名字不得超过200字')
        return false
      }
      let isLt2M = file.size / 1024 / 1024
      if (isLt2M > 200) {
        this.$message.error('只允许上传200M以下的文件')
        return false
      }
      let fileExt = file.name.slice(file.name.lastIndexOf('.') + 1)
      let fileTypeArr = ['doc', 'docx', 'xls', 'xlsx', 'jpg', 'jpeg', 'png', 'pdf', 'txt']
      if (fileTypeArr.indexOf(fileExt) === -1) {
        this.$message.error('非法的文件类型')
        return false
      }
      return true
    },
    customUpload (file) {
      // beforeFileUpload()返回为true，才会触发这个方法；
      this.handleUpload(file.file)
    },
    // 构造formData
    handleUpload (file) {
      const formData = new FormData()
      let timestamp = new Date().getTime()
      formData.append('files', file)
      formData.append('fileUid', file.uid)
      formData.append('totalBytes', file.size)
      formData.append('time', timestamp)
      this.imagerAdd(formData)
    },
    // 上传
    async imagerAdd(formData) {

    },
    // 保存
    save () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          addPublicityOfFeedback(this.ruleForm).then(res => {
            this.$message.success(res)
          })
        }
      })
    },
    // 刷新
    reset () {
      getPublicityOfFeedback().then(res => {
        if (res.length !== 0) {
          this.ruleForm = { ...res[0] }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
